<template>
	<view class="content">
		<view class="head">
			<view class="head1">
				<!-- <view class="tp1">
					<image class="t1" src="./tb.png" alt="" />
					
						<view class="iconfont icon-chakantiezigengduojubao">
							
						</view>
				</view> -->
				<view class="iconfont icon-dibiao">
					
				</view>
				<!-- 下拉框 -->
				<view class="xialakuang">
					<uni-data-select  
					  v-model="value"
					  :localdata="range"
					  @change="change"
					></uni-data-select>
					<view class="iconfont icon-xialajiantou"></view>
				</view>
				<!-- <view class="w1">
					<text>广东科贸职业学院...</text>
				</view> -->
				<!-- <view class="tp2">
					<image class="t2" src="./jt.png" alt="" />
				</view> -->
				
			</view>
			<view class="head2">
				<!-- 搜索栏 -->
				<view class="sousuolan">
					<!-- 搜索框 -->
					   <input class="search-input" type="text" v-model="keyword" placeholder="搜索" @input="onInput" />
						
					   <!-- 搜索结果列表 -->
					   <ul class="search-list">
					     <li v-for="(item, index) in searchResults" :key="index">
					       {{ item.title }}
					     </li>
					   </ul>
					   <view class="iconfont icon-31sousuo"></view>
				</view>
			<!-- 	<view class="w2">
					<text>搜索</text>
				</view> -->
			<!-- 	<view class="tp3">
					<image class="t3" src="./ss.png" alt="" />
				</view> -->
				
			</view>
		</view>
		<view class="middle">
			<view class="m1">
				<text>全部闲置</text>
			</view>
			<view class="m2">
				<text>全部求购</text>
			</view>
		</view>
		<view class="bottom">
			<view class="hz1" @click="gotoDetail">
				<image class="tp4" src="/static/tradeImg/shuji.jpg" alt="" />
				<text class="w3">广东专插本教材</text>
				<view class="w4">
					<!-- <view class="wenzi1"> -->
						<text class="wz1">广东</text>
						<text class="wz2">清远</text>
						<text class="wz3">广东科贸</text>
					<!-- </view> -->
					<view class="wenzi2">
						<text class="wz5">职业学院</text>
						<text class="wz6">(清远校区)</text>
					</view>
				</view>
				<view class="jiage">
					<text>￥20</text>
				</view>
			</view>
			<view class="hz2" @click="gotoDetail">
				<image class="tp4" src="/static/tradeImg/shuji.jpg" alt="" />
				<text class="w3">广东专插本教材</text>
				<view class="w4">
					<!-- <view class="wenzi1"> -->
						<text class="wz1">广东</text>
						<text class="wz2">清远</text>
						<text class="wz3">广东科贸</text>
					<!-- </view> -->
					<view class="wenzi2">
						<text class="wz5">职业学院</text>
						<text class="wz6">(清远校区)</text>
					</view>
				</view>
				<view class="jiage">
					<text>￥20</text>
				</view>
			</view>
			
			<!-- <view class="iconfont icon-aixin1"></view>	 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      value: 0,
	      range: [
	        { value: 0, text: "广东科贸职业学院" },
	        { value: 0, text: "广东r贸职业学院" },
	        
	      ],
		  keyword:'',
		  searchResults:''
	    };
	  },
	  methods: {
	    change(e) {
	      console.log("e:", e);
	    },
		onInput(){},
		gotoDetail(){
			  uni.navigateTo({
			  	url:'/subpkg/trade/tradeDetail'
			  })
		  }
		
	  },
	};
	
</script>

<style scoped>
.head{
	display: flex;
	align-items: center;
	width:686rpx;
	margin:20rpx 32rpx;
}
.head1{
	position: relative;
	width: 46%;
}
.icon-dibiao{
	position: absolute;
	top: 20rpx;
	left: 10rpx;
	z-index: 99;
}
/deep/ .uni-select__input-text{
		font-size: 28rpx;
	}
	/deep/ .uni-select__input-box{
		padding:0 0 0 20rpx;
		/* 超出省略号显示 */
		text-overflow: ellipsis;
		overflow: hidden;
	}
.xialakuang{
		/* width: 300rpx; */
		/* margin: -62rpx 0 0 40rpx;	 */
		/* font-size: 320rpx ; */
	}
.t2{
	width: 34rpx;
	height: 34rpx;
	/* margin: 23rpx 0 0 2rpx; */
}
.sousuolan{
	position: relative;
	
		/* height: 78rpx;
		width: 300rpx; */
		padding: 12rpx;
		border: 2rpx solid #bebebe;
		border-radius: 10rpx;
		/* float: right; */
		margin-left: 10rpx;
		/* 图标位置 */
		padding-right: 50rpx;
	}
	.search-input{
		font-size: 30rpx;
		text-color: black;
	}
.icon-31sousuo{
	position: absolute;
		right: 20rpx;
		top: 20rpx;
	/* width: 40rpx;
	height: 40rpx; */
	/* margin: -44rpx 0 0 230rpx; */
}
.head2{
	flex: 1;
	}
	.middle{
		display: flex;
		padding: 0 32rpx;
	}
.m1,.m2{
	width:100%;
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3rpx solid #bebebe;
}	
.m1{
	/* margin: 40rpx 0 0 32rpx; */
	background-color:#00DCB6;
}
.m2{
	/* float: right; */
	/* margin: -74rpx 32rpx 0 0; */
	}
.middle text{
	font-size: 32rpx;
	
}	
.hz1{
	width: 320rpx;
	height: 560rpx;
	border: 3rpx solid #bebebe;
	margin: 40rpx 0 0 32rpx;
}
.tp4{
	width: 260rpx;
	height: 260rpx;
	margin: 25rpx 0 0 30rpx;
}
.w3{
	font-size: 32rpx;
	margin: 20rpx 0 0 30rpx;
}
.w4{
	/* width: 230rpx; */
	/* height: 80rpx; */
	font-size: 24rpx;
	background-color: #bebebe;
	margin: 20rpx ;
	padding: 20rpx 15rpx ;
}
.wz1,.wz2,.wz3{
    margin: 0 0 0 12rpx;
	
	}
.wenzi2{
	margin: 15rpx 0 0 12rpx;
}
.wz6{
	margin-left: 12rpx;
}
.jiage{
	color: red;
	margin:30rpx 0 0 30rpx;
	font-size: 32rpx;
}
.hz2{
	width: 320rpx;
	height: 560rpx;
	border: 3rpx solid #bebebe;
	/* margin: 40rpx 0 0 32rpx; */
	float: right;
	margin: -563rpx 32rpx 0 0;
}
.tp4{
	width: 260rpx;
	height: 260rpx;
	margin: 25rpx 0 0 30rpx;
}
.w3{
	font-size: 32rpx;
	margin: 20rpx 0 0 30rpx;
}

.wenzi2{
	margin: 15rpx 0 0 12rpx;
}
.wz6{
	margin-left: 12rpx;
}
.jiage{
	color: red;
	margin:10rpx 0 0 30rpx;
	font-size: 42rpx;
}
</style>